// ==UserScript==
// @name        油猴脚本 Gui 模板 Layui
// @namespace   Violentmonkey Scripts
// @match       https://b.xiaomai5.com/*
// @match       https://blog.csdn.net/*
// @match       http://www.uikitcss.com/*
// @grant       GM_getResourceText
// @grant       GM_addStyle
// @version     0.1
// @author      -
// @description 2022年8月12日 22点52分
// @require     https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/layui.min.js
// @resource    layuicss https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/css/layui.min.css
// ==/UserScript==

// GUI 界面处理（悬浮按钮 + 面板
layuicss = GM_getResourceText('layuicss')
layuicss = layuicss.replaceAll(`../font/iconfont`, `https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/font/iconfont`)
GM_addStyle(layuicss)

$('body,#app').eq(0).append(`
    <div style="position: fixed; bottom: 150px; left: 10px; z-index: 9999;">
      <div id="l-panel" class="layui-tab layui-tab-brief layui-hide" style="width: 600px; height: 500px; padding: 0 15px; box-shadow: 1px 1px 30px rgb(0 0 0 / 12%); background-color: white">
        <ul class="layui-tab-title">
          <li class="layui-this">配置</li>
          <li>日志</li>
          <li>看板</li>
          <button id='panelclose' class="layui-btn" style="float:right; background-color: #5FB878">X</button>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">
            <div class="layui-form layui-form-pane">
              <div class="layui-form-item">
                <label class="layui-form-label">长输入框</label>
                <div class="layui-input-block">
                  <input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input"></div>
              </div>
              <div class="layui-form-item" pane="">
                <label class="layui-form-label">原始复选框</label>
                <div class="layui-input-block">
                  <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
                  <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
                  <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled=""></div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">选择框</label>
                <div class="layui-input-block">
                  <select name="interest" lay-filter="aihao">
                    <option value=""></option>
                    <option value="0">写作</option>
                    <option value="1">阅读</option>
                    <option value="2">游戏</option>
                    <option value="3">音乐</option>
                    <option value="4">旅行</option></select>
                </div>
              </div>
              <div class="layui-form-item" pane="">
                <label class="layui-form-label">单选框</label>
                <div class="layui-input-block">
                  <input type="radio" name="sex" value="男" title="男" checked="">
                  <input type="radio" name="sex" value="女" title="女">
                  <input type="radio" name="sex" value="禁" title="禁用" disabled=""></div>
              </div>
              <div class="layui-form-item" pane="">
                <label class="layui-form-label">开关-开</label>
                <div class="layui-input-block">
                  <input type="checkbox" name="xxx" lay-skin="switch">
                  <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
                  <input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
                  <input type="checkbox" name="aaa" lay-skin="switch" disabled></div>
              </div>
              <div class="layui-progress">
                <div class="layui-progress-bar" lay-percent="60%"></div>
              </div>
            </div>
          </div>
          <div class="layui-tab-item">Tab body 2</div>
          <div class="layui-tab-item">Tab body 3</div>
        </div>
      </div>
  
      <span class="layui-badge-dot"></span>
      <button class="layui-btn layui-btn-radius layui-btn-lg" id="layui_tab" style="background-color: #5FB878">
      <span class="layui-badge-rim">L</span>_
      <span class="layui-badge-rim">C</span>
      </button>
      <span class="layui-badge-dot"></span>

    </div>
`)

layui.use('element',function() {
  var $ = layui.jquery, element = layui.element;

  $(function() {
    $('#layui_tab, #panelclose').on('click',function() {
      console.log($('#l-panel').style);
      if ($('#l-panel').hasClass('layui-hide')) {
        $('#l-panel').removeClass('layui-hide').addClass('layui-show');
      } else {
        $('#l-panel').removeClass('layui-show').addClass('layui-hide');
      }
    });
  })

});

// 业务逻辑处理
